<template>
	<view class="inspectContent">
		<view class="upper">
			<view class="title">
				<view class="arrow" @click="goBack"></view>
				<text>查看消息</text>
			</view>
		</view>
		<view class="centre">
			<view class="h1">{{ title }}</view>
			<view class="h2">
				<view class="date">{{ date }}</view>
				<view class="time">{{ time }}</view>
			</view>
			<view class="content">
				<image :src="imgPath" mode="" v-show="imgPath != ''"></image>
				<view class="text">{{ content }}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		components: {
			
		},
		data() {
			return { 
				title: '',
				date: '',
				time: '',
				imgPath: '',
				content: ''
			}
		},
		onLoad(options) {
			
			//获取基础信息
			this.initSearchData(options.id)
			
		},  
		methods: {
			goBack() {
				uni.navigateBack();
			},
			async initSearchData(id){
				let data = {
					id: id
				}
				
				const res = await  uni.$api.getNoticeDetail(data); 
				this.title = res.data.data.noticeTitle
				
				const date = new Date(res.data.data.createTime);
				const year = date.getFullYear();
				const month = date.getMonth() + 1;
				const day = date.getDate();
				const hours = date.getHours();
				const minutes = date.getMinutes();
				const seconds = date.getSeconds();
				
				this.date = year + '-' + month.toString().padStart(2, '0') + '-' + day.toString().padStart(2, '0');
				this.time = hours.toString().padStart(2, '0') + ':' + minutes.toString().padStart(2, '0') + ':' + seconds.toString().padStart(2, '0');
				this.imgPath = res.data.data.imgPath
				this.content = res.data.data.content
			},
		},
		watch: {
			
		},
	}
</script>

<style lang="scss">
	.inspectContent {
		background: #F9F9F9;
		height: calc(100vh - 115rpx);

		.upper {
			position: fixed;
			z-index: 1;
			top: 0;
			left: 0;
			width: 100%;

			.title {
				background: url('../../static/img/inspectBg.png');
				background-size: cover;
				width: 100%;
				height: 115rpx;
				line-height: 115rpx;
				position: relative;
				display: flex;
				justify-content: center;

				.arrow {
					position: absolute;
					left: 33rpx;
					top: 50%;
					transform: translate(0%, -50%);
					width: 100rpx;
					height: 100rpx;
					 
					&::before {
						display: block;
						content: "";
						position: absolute;
						top: 50%;
						left: 0%;
						width: 20rpx;
						height: 20rpx;
						border-left: 1px solid #fff;
						border-top: 1px solid #fff;
						transform: translate(0%, -50%) rotate(-45deg);
					}
				}
				
				text {
					font-size: 30rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #FFFFFF;
					letter-spacing: 1px;
				}
			}
		}
		
		.centre {
			margin: 115rpx auto 0;
			padding: 0 38rpx;
			
			.h1 {
				padding: 26rpx 0;
				text-align: center;
				border-bottom: 2rpx solid #D8D8D8;
				font-size: 28rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #333333;
			}
			
			.h2 {
				display: flex;
				margin: 20rpx auto;
				justify-content: space-between;
				font-size: 20rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #999999;
			}
			
			.content {
				
				image {
					width: 100%;
					height: 286rpx;
					border-radius: 25rpx;
				}
				
				.text {
					margin: 20rpx auto 0;
					font-size: 20rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #666666;
					line-height: 28rpx;
				}
			}
		}
	}
</style>
